<template>
    <div class="meta-class-admin-container">
        <el-table
            v-loading="formListLoading"
            :data="formList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
        >
            <el-table-column align="center" label="投融资形式">
                <el-table-column
                    align="center"
                    type="index"
                    width="180"
                    label="序号"
                >
                </el-table-column>
                <el-table-column align="center" label="类型">
                    <template slot-scope="scope">
                        <el-input v-if="scope.row.edit" :style="{'maxWidth': '300px'}" v-model="scope.row.name"
                                  placeholder="请输入内容"/>
                        <span v-else>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button
                            v-if="scope.row.edit"
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">
                            保存
                        </el-button>
                        <el-button
                            v-else
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">
                            编辑
                        </el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>
        <el-button @click="handleAddForm" :style="{'marginTop': '20px'}">
            {{addForm ? '确认':'添加'}}
        </el-button>
        <br/>
        <el-input v-if="addForm" v-model="addFormInput" placeholder="请输入内容"
                  :style="{'marginTop': '20px', 'maxWidth': '300px'}"/>

        <el-table
            :style="{'marginTop': '80px'}"
            v-loading="businessListLoading"
            :data="businessList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
        >
            <el-table-column align="center" label="行业类别">
                <el-table-column
                    align="center"
                    type="index"
                    width="180"
                    label="序号"
                >
                </el-table-column>
                <el-table-column align="center" label="类型">
                    <template slot-scope="scope">
                        <el-input v-if="scope.row.edit" :style="{'maxWidth': '300px'}" v-model="scope.row.name"
                                  placeholder="请输入内容"/>
                        <span v-else>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button
                            v-if="scope.row.edit"
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">
                            保存
                        </el-button>
                        <el-button
                            v-else
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">
                            编辑
                        </el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>
        <el-button @click="handleAddBusiness" :style="{'marginTop': '20px'}">
            {{addBusiness ? '确认':'添加'}}
        </el-button>
        <br/>
        <el-input v-if="addBusiness" v-model="addBusinessInput" placeholder="请输入内容"
                  :style="{'marginTop': '20px', 'maxWidth': '300px'}"/>

        <el-table
            :style="{'marginTop': '80px'}"
            v-loading="poolListLoading"
            :data="poolList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
        >
            <el-table-column align="center" label="信息池类型">
                <el-table-column
                    align="center"
                    type="index"
                    width="180"
                    label="序号"
                >
                </el-table-column>
                <el-table-column align="center" label="类型">
                    <template slot-scope="scope">
                        <el-input v-if="scope.row.edit" :style="{'maxWidth': '300px'}" v-model="scope.row.name"
                                  placeholder="请输入内容"/>
                        <span v-else>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button
                            v-if="scope.row.edit"
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">
                            保存
                        </el-button>
                        <el-button
                            v-else
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">
                            编辑
                        </el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>
        <el-button @click="handleAddPool" :style="{'marginTop': '20px'}">
            {{addPool ? '确认':'添加'}}
        </el-button>
        <br/>
        <el-input v-if="addPool" v-model="addPoolInput" placeholder="请输入内容"
                  :style="{'marginTop': '20px', 'maxWidth': '300px'}"/>
    </div>
</template>

<script>

    import {NAME_KEY, ROLE_KEY} from "../../constants";
    import {
        addMetaClass,
        deleteMetaClass,
        getMetaClassList,
        updateMetaClass
    } from "../../api/meta-class";
    import {formatTime} from "../../utils/timeFormat";

    export default {
        name: 'meta-class-admin',
        data() {
            return {
                formListLoading: true,
                formList: null,
                businessListLoading: true,
                businessList: null,
                poolListLoading: true,
                poolList: null,
                role: localStorage.getItem(ROLE_KEY),
                username: localStorage.getItem(NAME_KEY),
                addForm: false,
                addFormInput: '',
                addBusiness: false,
                addBusinessInput: '',
                addPool: false,
                addPoolInput: ''
            }
        },
        methods: {
            formatTime: formatTime,
            handleEdit(index, row) {
                if (row.edit === true) {
                    const param = {
                        id: row.id,
                        name: row.name
                    }
                    updateMetaClass(param).then(res => {
                        window.location.reload()
                    })
                }
                row.edit = !row.edit

            },
            handleDelete(index, row) {
                const param = {
                    id: row.id
                }
                deleteMetaClass(param).then(res => {
                    window.location.reload()
                })
            },
            handleAddForm() {
                if (this.addForm) {
                    const param = {
                        'type': 'form',
                        'name': this.addFormInput
                    }
                    addMetaClass(param).then(res => {
                        console.log(res)
                        window.location.reload()
                    })
                }
                this.addForm = !this.addForm
            },
            handleAddBusiness() {
                if (this.addBusiness) {
                    const param = {
                        'type': 'business',
                        'name': this.addBusinessInput
                    }
                    addMetaClass(param).then(res => {
                        console.log(res)
                        window.location.reload()
                    })
                }
                this.addBusiness = !this.addBusiness
            },
            handleAddPool() {
                if (this.addPool) {
                    const param = {
                        'type': 'pool',
                        'name': this.addPoolInput
                    }
                    addMetaClass(param).then(res => {
                        console.log(res)
                        window.location.reload()
                    })
                }
                this.addPool = !this.addPool
            }
        },
        mounted() {
            this.formListLoading = true
            getMetaClassList({'type': 'form'}).then(res => {
                // this.list = res.data;
                this.formList = res.data
                for (let i = 0; i < this.formList.length; ++i) {
                    let item = this.formList[i];
                    item['edit'] = false
                }
                this.formListLoading = false
            })
            getMetaClassList({'type': 'business'}).then(res => {
                // this.list = res.data;
                this.businessList = res.data
                for (let i = 0; i < this.businessList.length; ++i) {
                    let item = this.businessList[i];
                    item['edit'] = false
                }
                this.businessListLoading = false
            })
            getMetaClassList({type: 'pool'}).then(res => {
                this.poolList = res.data;
                for (let i = 0; i < this.poolList.length; ++i) {
                    let item = this.poolList[i]
                    item['edit'] = false
                }
                this.poolListLoading = false
            })
        }
    }
</script>

<style lang="scss" scoped>
    .meta-class-admin {
        &-subtitle {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 16px;
            margin-top: 50px;
        }

        &-container {
            margin: 30px;
            max-width: 90%;
        }

        &-text {
            font-size: 30px;
            line-height: 46px;
        }
    }
</style>
